<template>
    <div>
        <el-form label-width="auto" :inline="true">
            <el-form-item label="设备编码">
                <el-input v-model="pageParam.condition.deviceNumber" placeholder="设备编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="pageParam.condition.deviceType" placeholder="同步类型" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> 
            </el-form-item>                         
            <el-form-item label="对象名称">
                    <el-input v-model="pageParam.condition.deviceName" placeholder="对象名称"></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="success" @click="handleNew">新增</el-button>
                <el-button type="danger" @click="handleBatchDelete">删除</el-button>
                <el-button type="info" @click="save">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="pageData.records" border stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="deviceCode" label="设备编码"></el-table-column>
            <el-table-column prop="objectName" label="设备名称"></el-table-column>
            <el-table-column prop="objectType" label="设备类型"></el-table-column>
            <el-table-column prop="time" label="同步时间"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>

                    <el-button type="danger" :icon="Delete" size="small"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination v-model:current-page="pageData.current" v-model:page-size="pageData.size"
                :page-sizes="[2, 5, 10]" :size="pageData.size" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
// 从后端将分页数据获取到前端使用表格展示
import http from '@/utils/http'
import { ref, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus'
import { Delete, Edit } from '@element-plus/icons-vue'
let router = useRouter()
const options = [
  {
    value: '业主',
    label: '业主',
  },
  {
    value: '小区',
    label: '小区',
  },
  {
    value: '其他',
    label: '其他',
  }
]
// 分页参数
let pageParam = ref({
    pageNum: 1,
    pageSize: 10,
    condition: {
    }
})
let pageData = ref({
    records: [],
    total: 0,
    current: 1,
    size: 10

})
//定义获取分页数据的函数
async function getPageData() {
    let resp = await http.post('/deviceDateSynchronization/page', pageParam.value)
    pageData.value = resp.data
    console.log(pageData.value)
}
//组件加载时执行一次 获取分页数据
onBeforeMount(() => {
    getPageData()
})
function handleSizeChange(val) {
    pageParam.value.pageSize = val
    getPageData()
}
function handleCurrentChange(val) {
    pageParam.value.pageNum = val
    getPageData()
}
function handleSearch() {
    getPageData()
}
function handleNew() {
    router.push('/deviceDateSynchronizationForm')
}
function handleEdit(id) {
    router.push('/deviceDateSynchronizationForm/?id=' + id)
}
function handleDelete(id) {
    // 1.确认
    ElMessageBox.confirm('确认删除该记录吗？', '删除记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        // 如果点击确认按钮，则发送请求
        let resp = await http.delete(`/deviceDateSynchronization/delete/${id}`)
        // 提示操作结果
        if (resp.code == 200) {
            ElMessageBox.alert('删除成功', '删除记录', {
                confirmButtonText: 'OK'
            })
            getPageData()
        } else {
            ElMessageBox.alert('删除失败', '删除记录', {
                confirmButtonText: 'OK'
            })
        }
    })
}
//多选
let multipleSelection = ref([])
function handleSelectionChange(val) {
    multipleSelection.value = val
}
//批量删除
function handleBatchDelete() {
    let ids = []
    multipleSelection.value.forEach(item => {
        ids.push(item.id)
    })
    ElMessageBox.confirm(`确定删除选中的记录(${ids})吗？`, '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async function () {
        let resp = await http.post('/deviceDateSynchronization/delete', ids)
        if (resp.code == 200) {
            ElMessageBox.alert(`成功删除选中的记录(${ids})`, '批量删除', {
                confirmButtonText: 'OK'
            })
            getPageData()
        }
    })
}
</script>

<style lang="css" scoped>
.condition {
    margin-bottom: 20px;
}
</style>